<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width,initial-scale=1' />
	<style type="text/css">
		#slider-box {
			position: relative;
			margin: 100px;
			width: 200px;
			height: 30px;
			border: 1px solid #ddd;
		}
		#slider {
			position: absolute;
			top: 0;
			left: 0px;
			width: 30px;
			height: 100%;
			background: #aaa;
		}
		.process {
			display: inline-block;
			width: 0px;
			height: 100%;
			background-color: green;
		}
	</style>
</head>
<body>
	<section id='slider-box'>
		<span id='back' class='process'></span><div id='slider'></div>
	</section>
<script type="text/javascript">
	'use strict'
	window.onload = function(){
		var slider = document.getElementById('slider'),
			box = document.getElementById('slider-box'),
			back = document.getElementById('back');
		function Drag(obj,par,back){
			this.parameter = {
				left: 0,
				currentX: 0,
				width: 0,
				parWidth: 0,
				parLeft: 0,
				flag: false
			}
			this.target = obj;
			this.par = par;
			this.back = back;
			this.startDrag().mouseDown().mouseUp().mouseMove();
		}
		Drag.prototype = {
			getCss: function(obj,name){
				return obj.currentSyle ? obj.currentSyle[name] : document.defaultView.getComputedStyle(obj,false)[name];
			},
			startDrag: function(){
				if(this.getCss(this.target,'left') != 'auto'){
					this.parameter.left = this.getCss(this.target,'left');
				}
				if(this.getCss(this.par,'left') != 'auto'){
					this.parameter.parLeft = this.getCss(this.par,'left');
				}
				this.parameter.width = parseInt(this.getCss(this.target,'width'));
				this.parameter.parWidth = parseInt(this.getCss(this.par,'width'));
				return this;
			},
			mouseDown: function(){
				var _this = this;
				this.target.addEventListener('mousedown',function(e){
					_this.parameter.flag = true;
					var event = e ? e : window.event;
					_this.parameter.currentX = event.clientX;
				})
				return this;
			},
			mouseUp: function(){
				var _this = this;
				document.addEventListener('mouseup',function(e){
					_this.parameter.flag = false;
					if(parseInt(_this.parameter.left) === 0){
						_this.back.style.width = _this.target.style.left = 0;
					}
				})
				return this;
			},
			mouseMove: function(){
				var _this = this;
				document.addEventListener('mousemove',function(e){
					var event = e ? e : window.event;
					if(_this.parameter.flag){
						var nowX = e.clientX,
							distance = 0,
							maxDis = 0;
						distance = nowX - _this.parameter.currentX;
						maxDis = _this.parameter.parWidth - _this.parameter.width;
						if(distance >= maxDis){
							_this.back.style.width = _this.target.style.left = maxDis +　'px';
							_this.parameter.left = maxDis;
						}else if(distance < 0){
							_this.back.style.width = _this.target.style.left = 0;
						}else{
							_this.back.style.width = _this.target.style.left = parseInt(_this.parameter.left) + distance +　'px';
						}
					}
				})
				return this;
			}
		}
		new Drag(slider,box,back);
	}
</script>
</body>
</html>